<template>
  <div>
    <ul class="list">
      <li v-for="(item,index) in arr" :key="item.id" v-show="index<maxLength">
        <div class="asection" @click="gotoDetailPage( item['tradeItemId'] )" :id="item['tradeItemId']">
          <img class="mg" :src="categoryItemImg(item)" :alt="categoryItemTitle(item)" />
          <div class="bottom-box">
            <!-- {{}}中可以直接填方法和data值 -->
            <span>{{ categoryItemTitle(item).slice(0,12) }}</span>
            <p>{{ categoryStarNum(item) }} 积分</p>
            <div class="btn">立即兑换</div>
          </div>
          <img
            class="flag"
            src="../assets/img/section_new.png"
            alt=""
            v-show="categoryStarNum(item)<100"
          />
          <img
            class="flag"
            src="../assets/img/section_hot.png"
            alt=""
            v-show="categoryStarNum(item)>1000"
          />
        </div>
      </li>
    </ul>
  </div>
</template>
  
<script>
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'kapian',
    props:["arr", "maxLength","zid"],
    data() {
      return {
        "clothing_more":{
          title:'clothing_more',
          detail:'clothing_detail'
        },
        "skirt_more":{
          title:'skirt_more',
          detail:'skirt_detail'
        },
        "trousers_more":{
          title:'trousers_more',
          detail:'trousers_detail'
        },
        "shoes_more":{
          title:'shoes_more',
          detail:'shoes_detail'
        },
        "bags_more":{
          title:'bags_more',
          detail:'bags_detail'
        },
        "home_more":{
          title:'home_more',
          detail:'home_detail'
        }
      };
    },
    methods: {
      gotoDetailPage(gid) {
        const id = gid
        console.log(id);
        if( this.zid === "clothing_more"){
          var index = this.clothing_more.detail
          //let、const仅可以在作用域中使用，var在函数作用域中使用， 需注意闭包       
          console.log(index);
        }   
        if( this.zid === "skirt_more"){
          var index = this.skirt_more.detail
        }
        if( this.zid === "trousers_more"){
          var index = this.trousers_more.detail
        }
        if( this.zid === "shoes_more"){
          var index = this.shoes_more.detail
        }
        if( this.zid === "bags_more"){
          var index = this.bags_more.detail
        }
        if( this.zid === "home_more"){
          var index = this.home_more.detail
        }
        this.$router.push('/detail/' + index + '/' + id + '/')
      },
      categoryItemImg(item) {
        return item['img'] + "_440x587.v1cAC.40.webp"
      },
      categoryItemTitle(item) {
        return item["title"]
      },
      categoryStarNum(item) {
        return item['cfav']
      }
    },
  }
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang = "less" scoped>
.list {
    // width: 1220px; 
    // overflow: hidden; 
    display: flex;
    /* 自动换行 */
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding: 0;
   li{
      list-style:none;
      // less语法，&表示当前选择器
      &:nth-of-type(4n) {
        margin-right: 0px;
      }
      margin-bottom:30px; 
      width: 285px;
      float: left;
      margin-right: 20px;
      position: relative;
      border-radius:15px;
      .asection {
        border-radius:15px;
        width: 285px;
        height: 512px;
        position: relative;     
        // overflow: hidden;
        transition: all 0.5s linear;
        .mg{
          width: 285px;
          height: 330px;
          border-radius:15px 15px 0 0;
        }
      }
  
      .bottom-box {
        border-radius: 0 0 15px 15px;
        width: 285px;
        height: 162px;
        padding-bottom:20px;
        background-color: rgb(245, 245, 245);
        text-align: center;
        span{
          margin:0;
          font-size: 20px;
          // font-family: SourceHanSansSC;
          font-weight: 300;
          color: #333333;
          height: 56px;
          line-height: 56px;
          /* background-color: #ffc; */
        }
        p {
          font-size: 18px;
          font-family: SourceHanSansSC;
          font-weight: bold;
          color: #fd604d;
        }
        .btn {
          width: 100px;
          height: 36px;
          line-height: 36px;
          border: 1px solid #856437;
          margin: 20px auto 0;
          font-size: 18px;
          font-family: SourceHanSansSC;
          font-weight: 300;
          color: #856437;
        }
      }
  
      .flag {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 15px 0 0 0;
      }
  
      &:hover {
        cursor: pointer;
        .asection {
          margin-top: -15px;   //向上移动15px
          box-shadow: 0 0 10px #ccc;    //阴影，水平移动加垂直移动，模糊距离加阴影颜色
          .btn {
            background-color: #856437;
            color: #fff;
          }
        }
      }
    }
  }
</style>